<template>
	<view style="background-color: #f5f5f5;">
		<view class="header">
			<search v-if="searchIf" ref="sea" @confirm="confirmSearch" @reload="reload"/>
			<view class="title">
				<scroll-view scroll-x style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft">
					<view v-for="(item,index) in parent" class="inline-item" :key="index">
						<view class="inline-item" v-if="index==0" @click="backTree(item,-1)">
							<text v-if="index==parent.length-1&&!isre" class="none">全部</text>
							<text v-else class="active">全部</text>
						</view>
						<view v-if="index==0&&isre" @click="backTree(item,-2)" :class="[index==parent.length-1&&isre]?'none inline-item':'active inline-item'">
							<text class="iconfont icon-z043 iconclass"></text>
							搜索结果
						</view>
						<view class="inline-item" @click="backTree(item,index)" v-if="index!=0">
							<text v-if="index!=0" class="iconfont icon-z043 iconclass"></text>
							<text v-if="index==parent.length-1" class="none inline-item">
								{{item[props.label]}}
							</text>
							<text v-else class="active">
								{{item[props.label]}}
							</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view>
			<uni-section title="设备位置" type="line"></uni-section>
			<view class="container-list">
				<view class="common" v-for="(item, index) in tree" :key="index">
					<label class="content">
						<view class="word" @click="toRelations(item)">{{item[props.label]}}</view>
						<view class="right" @click="toChildren(item)">
							<text v-if="item.children.length>0" class="iconfont icon-z043"></text>
						</view>
					</label>
				</view>
			</view>
			
			<uni-section title="设备资产" type="line"></uni-section>
			<view class="container-list">
				<view class="common" v-for="(item, index) in relation" :key="index">
					<label class="content">
						<view class="checkbox" @click.stop="checkbox(item,index)">
							<text v-if="item.checked" class="txt iconfont icon-selected">
							</text>
							<text style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1">
							</text>
						</view>
						<view class="person">
							{{item[props.label].substring(item[props.label].length-2)}}
						</view>
						<view class="word">{{item.no}}-{{item[props.label]}}</view>
					</label>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import search from './components/search/index.vue'
	export default {
		name: "tree",
		props: {
			trees: {
				type: Array,
				default: () => {
					return []
				}
			},
			relations: {
				type: Array,
				default: () => {
					return []
				}
			},
			isCheck: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			checkList: {
				type: Array,
				default: () => []
			},
			searchIf: {
				type: Boolean,
				default: () => true
			},
			props: {
				type: Object,
				default: () => {
					return {
						label: 'name',
						children: 'children',
						multiple: false,
						checkStrictly: false
					}
				}
			}
		},
		data() {
			return {
				isre: false,
				tree: this.trees,
				allData: this.trees,
				relation: this.relations,
				parent: [1],
				searchTreeResult: [],
				searchRelationResult: [],
				tochild: false,
				newCheckList: this.checkList,
				scrollLeft: 999
			}
		},
		components: {
			search
		},
		watch: {
			relations(n, o) {
				this.relation = n
			}
		},
		methods: {
			//单选
			checkbox: function(item, index) {
				var that = this;
				let status = !that.relation[index].checked
				that.$set(that.relation[index], 'checked', status)
				if (that.newCheckList.length <= 0) {
					that.newCheckList = [that.relation[index]]
				} else if (that.newCheckList.length == 1) {
					this.relation.forEach(item => {
						if (item.id != this.relation[index].id) {
							item.checked = false
						}
					})
					that.newCheckList = []
					if (that.relation[index].checked) {
						that.newCheckList.push(that.relation[index])
					}
				}
				that.$emit('sendValue', that.newCheckList)
			},
			//到下一级
			toChildren(item) {
				var that = this;
				this.tochild = true
				let children = that.props.children
				if (!item.user && item[children].length > 0) {
					that.tree = item[children]
					if (that.parent[0].id == item.id) {

					} else {
						that.parent.push(item)
					}
				}
				this.$nextTick(() => {
					this.scrollLeft += 200
				})
			},
			//展示关联信息
			toRelations(item) {
				this.$emit('showRelations', item)
			},
			//搜索
			confirmSearch(val) {
				this.searchTreeResult = []
				this.searchRelationResult = []
				this.searchTree(this.trees, val)
				this.searchRelation(this.relations, val)
				this.isre = true
				this.parent.splice(1, 6666)
				uni.showLoading({
					title: '正在查找'
				})
				setTimeout(() => {
					this.tree = this.searchTreeResult
					this.relation = this.searchRelationResult
					uni.hideLoading()
				}, 300)
			},
			searchTree(data, keyword) {
				var that = this
				let children = that.props.children
				for (var i = 0, len = data.length; i < len; i++) {
					if (data[i].name.indexOf(keyword) >= 0) {
						that.searchTreeResult.push(data[i])
					}
					if (data[i][children].length > 0) {
						that.searchTree(data[i][children], keyword)
					}
				}
			},
			searchRelation(data, keyword) {
				var that = this
				for (var i = 0, len = data.length; i < len; i++) {
					if (data[i].name.indexOf(keyword) >= 0) {
						that.searchRelationResult.push(data[i])
					}
				}
			},
			//返回其它层
			backTree(item, index) {
				let that = this;
				if (index == -1) {
					that.tree = that.allData
					that.parent.splice(1, 6666)
					that.isre = false
					that.$refs.sea.clears()
				} else if (index == -2) {
					that.tree = that.searchTreeResult
					that.relation = that.searchRelationResult
					that.parent.splice(1, 6666)
				} else {
					if (that.parent.length - index > 2) {
						that.parent.forEach((item, i) => {
							if (i > index) {
								that.parent.splice(i, 6666)
							}
						})
					} else if (index == that.parent.length - 1) {
						
					} else {
						that.parent.splice(that.parent.length - 1, 1)
					}
					that.tree = item[that.props.children]
				}
			},
			reload() {
				this.$emit('showRelations')
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url("./css/icon.css");
	
	.flex_between_center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.checkbox {
		position: relative;
		height: 18px;
		margin-left: 5px;
		margin-right: 0px;
		width: 18px;
		
		.color {
			color: #00aaff;
			background-color: #00aaff;
		}
		
		.txt {
			font-size: 22px;
			line-height: 18px;
			width: 100%;
			height: 100%;
			display: flex;
		}
	}
	
	.checkBorder {
		border: 1px solid #ecdee4;
	}
	
	.header {
		width: 100%;
		
		.title {
			height: 45px;
			padding: 0 15px;
			line-height: 45px;
			font-size: 15px;
			color: #606064;
			
			.iconclass {
				display: inline-block;
				margin: 0 6px;
				color: #D0D4DB;
				font-size: 14px;
			}
		}
	}
	
	.container-list {
		overflow-y: scroll;
		overflow-x: hidden;
		//padding-bottom: 160rpx;
		
		.common {
			background-color: #fff;
			border-bottom: 1px solid #f4f4f4;
			padding-left: 5px;
			
			.content {
				display: flex;
				align-items: center;
				height: 50px;
				width: 100%;
				line-height: 50px;
				position: relative;
				font-size: 16px;
				
				.right {
					position: absolute;
					right: 15px;
					color: #babdc3;
					font-size: 16px;
				}
				
				.word {
					margin-left: 8px;
				}
			}
		}
	}
	
	.person {
		height: 32px;
		width: 32px;
		border-radius: 50%;
		border: 1px solid #1E91E6;
		background-color: #fff9f4;
		margin-left: 0px;
		color: #4297ED;
		line-height: 32px;
		font-size: 11px;
		text-align: center;
		margin-left: 10px;
	}
	
	.active {
		color: #4297ED !important;
	}
	
	.none {
		color: #666666;
	}
	
	.icon-selected{
		color: #0095F2!important;
		font-size: 20px!important;
	}
	
	.inline-item {
		display: inline-block
	}
	
	.uni-section {
		background-color: #FFF;
		border-bottom: 1px solid #F1F1F1;
	}
	
	.uni-section:first-child {
		margin-top: 0;
	}
</style>
